<template>
	<view>
		<view class="goodsData">
			<view class="goodsBox">
				<image :src="goodsData.pics[0].image" mode="aspectFill"></image>
				<view class="goodsNameBox">
					<view class="goodsName">{{goodsData.name}}</view>
					<view class="width_100">随时退 · 过期自动退</view>
					<view class="priceBox width_100">
						<text style="font-size:24rpx;transform:scale(0.75);color:#ff3333;font-weight: bold;">￥</text>
						<text style="font-size:34rpx;color:#ff3333;font-weight: bold;">{{goodsData.sell_price}}</text>
						<text style="margin-left:10rpx;" class="originPrice">￥{{goodsData.market_price}}</text>
						<view class="controller">
							<!-- <uni-icons type="minus" :size="23" :color="goodsNum > 1 ? 'red':'#95989e'"
								@click="minusBtn()"></uni-icons>
							<text class="goodsNum">{{goodsNum}}</text>
							<uni-icons :size="23" type="plus" color="red" @click="plusBtn()"></uni-icons> -->
							<uv-icon size="20" name="minus-circle" :color="goodsNum > 1 ? 'red':'#95989e'" @click="minusBtn()"></uv-icon>
							<text class="goodsNum">{{goodsNum}}</text>
							<uv-icon size="20" name="plus-circle" color="red" @click="plusBtn()"></uv-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="discountAmount">
				<text>共计：</text>
				<text style="color:#F15117;transform:scale(0.8);">￥</text>
				<text style="color:#F15117;font-size:36rpx;font-weight: bold;">{{totalAmount}}</text>
			</view>
		</view>

		<view class="goodsData">
			<view class="goodsTips">
				<text class="tipsTitle">消费须知</text>
				<text class="tipsContent">{{goodsData.buy_notice}}</text>
			</view>

			<view class="goodsTips">
				<text class="tipsTitle">服务保障</text>
				<text class="tipsContent">随时退 · 过期自动退</text>
			</view>

			<view class="goodsTips">
				<text class="tipsTitle">有效时限</text>
				<text class="tipsContent">购买后 {{goodsData.effective_day}} 天有效</text>
			</view>

			<view class="goodsTips">
				<text class="tipsTitle">店铺地址</text>
				<text class="tipsContent">{{goodsData.business.business_addr}}</text>
			</view>

			<view class="goodsTips" style="border:none;margin-bottom: 0;padding-bottom:15rpx;">
				<text class="tipsTitle">营业时间</text>
				<text class="tipsContent">{{goodsData.business.start_hours}} 至 {{goodsData.business.end_hours}}</text>
			</view>
		</view>

		<view class="payBox">
			<view class="payLeft">
				<view>
					<text style="color:#ff5e49;">合计</text>
					<text style="color:#ff5e49;">￥</text>
					<text style="font-size:36rpx;font-weight: bold;color:#ff3333;">{{totalAmount}}</text>
				</view>
				<view style="color:#919191;">
					<text style="margin-right:10rpx;">共{{goodsNum}}件</text>
					<text>已优惠￥{{totalDiscount}}</text>
				</view>
			</view>
			<view class="payRight" @click="payBtn()">提交订单</view>
		</view>
		<loading v-if="loading"></loading>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				loading: true, //
				goodsNum: 1, //默认商品数量
				opt: {}, //浏览器参数对象
				goodsData: {}, //商品数据
				totalAmount: 0, //总金额
				totalDiscount: 0, //总优惠
			}
		},

		onLoad: function(opt) {
			this.opt = app.getopts(opt);
			this.getDataFun();
		},

		methods: {
			//获取订单数据
			getDataFun() {
				let _this = this;
				app.get('ApiBusinessProduct/details', {
					id: _this.opt.id
				}, function(res) {
					_this.loading = false;
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					} else {
						_this.goodsData = res.data;
						_this.totalAmount = (_this.goodsData.sell_price * _this.goodsNum).toFixed(2); //总金额
						_this.totalDiscount = ((_this.goodsData.market_price - _this.goodsData.sell_price) * _this
							.goodsNum).toFixed(2); //总优惠
					}
				});
			},

			//提交订单事件
			payBtn() {
				this.loading = true;
				let _this = this;
				app.post('ApiBusinessProduct/createOrder', {
					amount: _this.totalAmount, //总金额
					bid: _this.goodsData.bid, //门店ID
					product_id: _this.goodsData.id, //商品ID
					num: _this.goodsNum //数量
				}, function(res) {
					if (res.status == 0) {
						_this.loading = false;
						app.alert(res.msg);
						return;
					} else {
						uni.requestPayment({
							'timeStamp': res.data.timeStamp,
							'nonceStr': res.data.nonceStr,
							'package': res.data.package,
							'signType': 'MD5',
							'paySign': res.data.paySign,
							'success': function(r) {
								_this.loading = false;
								app.success('付款完成');
								app.goto('/pagesZ/sameCity/writeOff?orderId='+res.order_id,'redirect');
							},
							'fail': function(res) {
								_this.loading = false;
								app.error('取消支付');
							}
						});
					}
				});
			},

			//数量加
			plusBtn() {
				this.goodsNum++;
				this.totalAmount = (this.goodsData.sell_price * this.goodsNum).toFixed(2); //总金额
				this.totalDiscount = ((this.goodsData.market_price - this.goodsData.sell_price) * this.goodsNum).toFixed(
				2); //总优惠
			},

			//数量减
			minusBtn() {
				if (this.goodsNum > 1) {
					this.goodsNum--;
					this.totalAmount = (this.goodsData.sell_price * this.goodsNum).toFixed(2); //总金额
					this.totalDiscount = ((this.goodsData.market_price - this.goodsData.sell_price) * this.goodsNum)
						.toFixed(2); //总优惠
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #f3f3f3;
	}

	.goodsData {
		width: 92%;
		float: left;
		margin: 30rpx 4% 0 4%;
		padding: 20rpx 0;
		/* padding:20rpx; */
		border-radius: 15rpx;
		background-color: #fff;
	}

	.originPrice {
		text-decoration: line-through;
	}

	.goodsBox {
		width: 94%;
		margin: 0 3%;
		display: flex;
		align-items: center;
	}

	.goodsBox image {
		width: 115rpx;
		height: 115rpx;
		border-radius: 10rpx;
	}

	.goodsNameBox {
		width: calc(100% - 130rpx);
		float: left;
		margin-left: 15rpx;
		color: #949494;
		font-size: 24rpx;
		line-height: 55rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.goodsName {
		width: 100%;
		float: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: bold;
		font-size: 28rpx;
		color: #000;
	}

	.width_100 {
		width: 100%;
		float: left;
	}

	.priceBox {
		display: flex;
	}

	.controller {
		display: flex;
		margin-left: auto;
		align-items: center;
	}

	.goodsNum {
		margin: -6rpx 20rpx 0 20rpx;
		font-size: 28rpx;
	}

	.discountAmount {
		width: 94%;
		margin: 20rpx 3% 0 3%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		line-height: 60rpx;
	}

	.goodsTips {
		width: 92%;
		float: left;
		margin: 10rpx 4% 20rpx 4%;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #f7f7f7;
	}

	.tipsTitle {
		margin-right: 50rpx;
		color: #5a5a5a;
		font-weight: bold;
		font-size: 28rpx;
	}

	.tipsContent {
		font-size: 26rpx;
		color: #959595;
	}

	.payBox {
		width: 100%;
		float: left;
		position: fixed;
		display: flex;
		padding: 20rpx 0;
		left: 0;
		bottom: 0;
		line-height: 45rpx;
		background-color: #fff;
		align-items: center;
		justify-content: space-around;
	}

	.payLeft {
		width: 50%;
		margin-left: 20rpx;
		font-size: 24rpx;
		float: left;
		display: flex;
		flex-wrap: wrap;
	}

	.payLeft view {
		width: 100%;
		float: left;
	}

	.payRight {
		width: 40%;
		float: left;
		border-radius: 50px;
		font-size: 30rpx;
		justify-content: center;
		display: flex;
		align-items: center;
		line-height: 80rpx;
		font-weight: bold;
		color: #fff;
		margin-right: 20rpx;
		background-image: linear-gradient(to right, #ff5e49, #ff3333);
	}
</style>